<template>
	<view class="content">
	<!-- 	<view style="height:80upx">
		<view class="fixed_tp">
			<image src="../../static/images/heileft.png" mode="widthFix" class="left_img" @click="back"></image>
			<view class="fixed_tit">投诉</view>
			<navigator class="fixed_right" hover-class="none" url="/pages/complain/set">
				<image src="/static/images/war.png" mode="widthFix" style="width: 30upx;"></image>
				投诉管理
			</navigator>
		</view>
		</view> -->
		<!-- end -->
		
		<view class="odl">
			<view class="label">投诉类型</view>
			<view class="kfs">
				      <u-checkbox-group
				            v-model="checkboxValue1"
				            placement="row"
				            @change="checkboxChange"
				        >
				            <u-checkbox
				                :customStyle="{marginBottom: '8px'}"
				                v-for="(item, index) in checkboxList1"
				                :key="index"
				                :label="item.name"
				                :name="item.name"
								activeColor="#07c160"
				            >
				            </u-checkbox>
				        </u-checkbox-group>
			</view>
		</view>	
		<!-- end -->
		
		<view class="odl">
			<view class="label">填写投诉内容</view>
			 <u--textarea v-model="content" placeholder="请详细描述投诉内容，建议您添加投诉凭证，我们 将及时跟进解决" height="150" count class="textarea" style="background-color: #f5f5f5;border:none;margin-top:20upx;"></u--textarea>
		</view>
		<!-- end -->
		
		<view class="odl">
			<view class="label">上传凭证（最多3张）</view>
		<view class="uPImg">
			<view class="shangchuan">
				<view class="sc2" v-for="(item, index) in imgList" :key="index">
					<image class="del" @click="del(index)" src="@/static/orderComplaint/del.png" mode="">
					</image>
					<image class="Img3" :src="item" mode=""></image>
				</view>
				<view class="sc2" v-if="imgList.length < 10" @click="upload">
					<image class="sc3" src="@/static/orderComplaint/add.png" mode=""></image>
				</view>
			</view>
		</view>
		</view>
		<!-- end -->
		
		<view class="text">提交后，您可以在投诉管理中查看进度以及处理结果</view>
		
		<view class="jv">提交投诉</view>
		
		
	
		<navigator class="jv" hover-class="none" url="/pagesA/complain/set" style="margin-top:20upx;background-color: #d3bb2b;">
			投诉管理
		</navigator>
		
		</view>
</template>

<script>
	export default{
		data (){
			return {
				/* 上传图片 */
				imgList: [],
				content:'',
				checkboxValue1:[],
				           // 基本案列数据
				           checkboxList1: [{
				                   name: '与期望不符',
				                   disabled: false
				               },
				               {
				                   name: '态度差',
				                   disabled: false
				               },
				               {
				                   name: '乱收费',
				                   disabled: false
				               },
								{
									 name: '内容不规范',
									disabled: false
								},
								{
									name: '手法不好',
									disabled: false
								},
				           ],
			}
		},
		methods:{
			back (){
				uni.navigateBack(-1)
			},
			checkboxChange(n) {
			            console.log('change', n);
			        },
			// 点击上传图片
			upload() {
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					loop: true,
					success: res => {
						if (res.tempFilePaths.length != 0) {
							this.imgList.push(res.tempFilePaths[0]);
						}
						var tempFilePaths = res.tempFilePaths;
			
						console.log(tempFilePaths[0]);
						uni.uploadFile({
							url: 'http://douzhuoqianshouba.xieenguoji.com/api/ajax/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							success: uploadFileRes => {
								console.log('上传图片', JSON.parse(uploadFileRes.data));
							},
							fail(err) {
								console.log(err);
							}
						});
					}
				});
			},
			
			// 删除图片
			del(index) {
				this.imgList.splice(index, 1);
				console.log(this.imgList);
			},
		}
		}
</script>

<style lang="scss">
	.content{
		width: 100%;
		min-height: 100vh;
		height:100%;
		background-color: #f7f7f7;
		padding-bottom:30upx;
	}
	.tab_view{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin:0 0 10upx;
	}
	.tab{
		background-color: #f5f5f5;
		border-radius: 5upx;
		padding:15upx 35upx;
		margin:20upx 20upx 0 0;
		color:#999;
		font-size:26upx;
	}
	.tab_active{
		background-color: #07c160;
		color:#fff
	}
	.kfs{
		margin-top:20upx;
	}
	::v-deep .u-checkbox-label--left{
		margin-right: 30upx;
	}
	::v-deep .u-radio{
		margin-right: 30upx;
	}
	::v-deep .u-checkbox-group--row{
		flex-wrap: wrap;
	}
	.fixed_tp{
		background-color: #fff;
		color:#000;
		/* #ifdef MP-WEIXIN */
		position: initial;
		/* #endif */
	}
	.jkcp{
			height: var(--status-bar-height);
			/* #ifdef MP-WEIXIN */
			padding-top:50upx;
			/* #endif */
		}
	.jv{
		background-color: #07c160;
		color:#fff;
		text-align: center;
		padding:20upx 0;
		border-radius: 100upx;
		width:92%;
		margin:50upx auto;
	}
	.odl{
		padding:20upx;
		background-color: #fff;
		border-radius: 10upx;
		width:85%;
		margin:30upx auto;
	}
	.label{
		font-size:28upx;
		margin:10upx 0;
		font-weight: 700;
	}
	.uPImg {
		width: 100%;
	}
	
	.shangchuan {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	
		.sc2 {
			width: 190rpx;
			height: 190rpx;
			border-radius: 10rpx;
			background-color: #dadfef;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 10rpx;
			position: relative;
			// background-color: #4CD964;
		}
	
		.Img3 {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	
		.del {
			width: 52rpx;
			height: 52rpx;
			position: absolute;
			z-index: 100;
			top: 0rpx;
			right: 0;
		}
	
		.sc3 {
			width: 96rpx;
			height: 96rpx;
			border-radius: 10rpx;
		}
	}
	.text{
		width:90%;
		margin:30upx auto;
		color:#656889;
		font-size:26upx;
	}
</style>